<template>
  <div class="table">
    <div class="th">
      <div
        class="th_item"
        :style="{ width: getStyle(item), flex: !item.widthPercentage ? '1' : '' }"
        v-for="item in columns"
        :key="item.key"
      >
        {{ item.title }}
      </div>
    </div>
    <div
      class="row"
      v-for="(item, index) in data"
      :key="item.index"
      :class="[index % 2 === 0 ? 'row_odd' : '']"
    >
      <div
        class="row_item"
        v-for="item2 in columns"
        :key="item2.key"
        :style="{ width: getStyle(item2), flex: !item2.widthPercentage ? '1' : '' }"
      >
        <n-ellipsis>
          {{ item2.isOrder ? index + 1 : item[item2.key] }}
        </n-ellipsis>
      </div>
    </div>
  </div>
  <n-space v-if="showPigination" justify="end" style="margin-top: 6px">
    <n-pagination
      show-quick-jumper
      v-model:page="proxyParmas.current"
      :item-count="total || 0"
      v-model:page-size="proxyParmas.pageSize"
    >
      <template #prefix>总共{{ total || 0 }}条数据</template>
    </n-pagination>
  </n-space>
</template>

<script setup lang="ts">
import { BasicColoumns } from './types'
const props = withDefaults(
  defineProps<{
    columns: Array<BasicColoumns>
    data: Array<any>
    params: {
      current: number
      pageSize: number
    }
    total?: number
    thHeight?: string // 表头高度
    rowHeight?: string // 行高
    showPigination?: boolean // 是否展示分页
  }>(),
  { total: 0, thHeight: '48px', rowHeight: '48px', showPigination: true }
)
const emit = defineEmits<{
  (
    e: 'update:params',
    params: {
      current: number
      pageSize: number
    }
  ): void
}>()

const proxyParmas = computed({
  get() {
    return new Proxy(props.params, {
      set(obj, name, val) {
        emit('update:params', {
          ...obj,
          [name]: val
        })
        return true
      }
    })
  },
  set(val) {
    emit('update:params', val)
  }
})

function getStyle(item: BasicColoumns) {
  if (typeof item.widthPercentage === 'number') return `${item.widthPercentage}px`
  return `${item.widthPercentage}`
}
</script>

<style lang="less" scoped>
.table {
  width: 100%;

  .th {
    display: flex;
    align-items: center;
    width: 100%;
    height: v-bind(thHeight);
    color: #8aabcc;
    font-size: 14px;
    padding: 0 24px;
    .th_item {
      white-space: nowrap;
      &:not(:last-child) {
        padding: 0 4px 0 0;
      }
    }
  }

  .row {
    display: flex;
    align-items: center;
    height: v-bind(rowHeight);
    color: #e3f1ff;
    padding: 0 24px;
    width: 100%;
    .row_item {
      width: 0;
      &:not(:last-child) {
        padding: 0 4px 0 0;
      }
    }
  }

  .row_odd {
    background: linear-gradient(270deg, rgba(67, 94, 129, 0.24) 0%, rgba(67, 94, 129, 0.14) 100%);
  }
}
</style>
